<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>基本导航条</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<!--
在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。

那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。

既然他是一个独立的组件，当然在不同的版本下有不同的文件：

   ☑   LESS版本：对应的源文件label.less
   ☑   Sass版本：对应的源文件_label.scss
   
用原理：

使用方法很简单，你可以在使用span这样的行内标签：

<h3>Example heading <span class="label label-default">New</span></h3>

运行效果见右侧结果窗口。

实现原理：

/*bootstrap.css文件第4261行～第4272行*/

.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
如果使用的是a标签元素来制作的话，为了让其更美观，在hover状态去掉下划线之类：

/*bootstrap.css文件第4273行～4278行*/

.label[href]:hover,
.label[href]:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
有的时候标签内没有内容的时候，可以借助CSS3的:empty伪元素将其隐藏：

.label:empty {
display: none;
}
-->
<body>
<!--代码-->
<h3>Example heading <span class="label label-default">New</span></h3>  
<!--代码-->
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">错误标签</span> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>
</html>